<template>
  <div class="lg:flex lg:h-screen lg:overflow-hidden w-full">
    <Dialog
      v-model:visible="visible"
      modal
      :header="i18nStore.translate('clear_weacth_tips')"
      :style="{ width: '35rem' }"
    >
      <div class="w-full px-3 justify-between">
        <Button
          class="text-xl font-bold bg-[#fd397a] px-4 py-2 text-white"
          @click="cancelWechatQrCode"
          >{{ i18nStore.translate('confirm') }}</Button
        >
        <Button
          class="text-xl font-bold bg-[#41b883] px-4 py-2 text-white ml-4"
          @click="visible = false"
          >{{ i18nStore.translate('cancel') }}</Button
        >
      </div>
    </Dialog>
    <menuBar></menuBar>
    <div
      class="flex-1 flex flex-col items-center pt-6 px-4 sm:px-6 bg-[#f4f5f6] dark:text-[#bec6cf] dark:bg-dark-background overflow-auto"
    >
      <!-- 个人信息卡片 -->
      <div
        class="flex w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-[20px]"
      >
        <FileUpload
          name="demo[]"
          accept="image/*"
          auto
          customUpload
          :maxFileSize="1000000"
          @uploader="avatarUpload"
        >
          <template #header="{ chooseCallback }">
            <div class="relative group cursor-pointer w-[56px] h-[56px]">
              <img
                class="w-[100%] h-[100%] rounded-[50%]"
                :src="userInfo.avatar || ok"
              />
              <div
                class="w-[100%] h-[100%] items-center justify-center absolute top-[0] left-[0] text-xs text-[#fff] hidden group-hover:flex rounded-[50%] bg-[#6666667d]"
                @click="chooseCallback()"
              >
                {{ i18nStore.translate('upload') }}
              </div>
            </div>
          </template>
        </FileUpload>
        <div class="ml-5">
          <div class="text-base dark:text-[#bec6cf] font-bold sm:text-lg">
            {{ userInfo.nickname }}
          </div>
          <div
            class="text-xs dark:text-[#666] text-gray-600 sm:text-sm"
            v-if="userInfo.mobile"
          >
            {{
              userInfo.mobile.slice(0, 3) + '****' + userInfo.mobile.slice(7)
            }}
          </div>
          <div
            class="text-xs dark:text-[#666] text-gray-600 sm:text-sm"
            v-if="userInfo.email"
          >
            {{ userInfo.email }}
          </div>
        </div>
      </div>
      <!-- 小文件升级 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex items-center mb-[34px] justify-between">
          <div class="flex items-center">
            <SvgIcon name="storage" class="text-[#00e1ff] h-[30px] mr-[5px]" />
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
            >
              {{ i18nStore.translate('small_file_upload_size') }}
            </div>
          </div>
          <myButton
            class="py-1 px-3 rounded-[5px] bg-[#00e1ff] text-white cursor-pointer"
            @click="showPayPopup({ type: '1' })"
          >
            {{ i18nStore.translate('upgrade') }}
          </myButton>
        </div>
        <div class="flex items-center">
          <div
            class="text-[#333] dark:text-[#bec6cf] sm:text-2xl text-xl font-bold mb-[13px] w-[150px]"
          >
            {{ formatSize(userInfo.fileWalletDTO.smallFileMaxSize) }}
          </div>
          <div class="text-[#333]">
            <div
              v-for="(item, index) in userInfo.smallFileExpireList"
              :key="index"
            >
              （{{ i18nStore.translate('套餐大小') }}：{{
                formatSize(item.size)
              }}&nbsp;&nbsp;&nbsp;{{ i18nStore.translate('过期时间') }}：{{
                timestampToTime(item.expireTime)
              }}）
            </div>
          </div>
        </div>
      </div>
      <!-- 下载点数 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex items-center mb-[34px] justify-between">
          <div class="flex items-center">
            <SvgIcon name="storage" class="text-[#00e1ff] h-[30px] mr-[5px]" />
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
            >
              {{ i18nStore.translate('download_points_remaining') }}
            </div>
          </div>
          <myButton
            class="py-1 px-3 rounded-[5px] bg-[#00e1ff] text-white cursor-pointer"
            @click="showPayPopup({ type: '4' })"
          >
            {{ i18nStore.translate('buy') }}
          </myButton>
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-2xl text-xl font-bold mb-[13px]"
        >
          {{
            userInfo.fileWalletDTO?.downloadBalancePoints +
            i18nStore.translate('count')
          }}
        </div>
      </div>

      <!-- 下载流量 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex items-center mb-[34px] justify-between">
          <div class="flex items-center">
            <SvgIcon name="storage" class="text-[#00e1ff] h-[30px] mr-[5px]" />
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
            >
              {{ i18nStore.translate('free_download_traffic') }}
            </div>
          </div>

          <myButton
            class="py-1 px-3 rounded-[5px] bg-[#00e1ff] text-white cursor-pointer"
            @click="showPayPopup({ type: '3' })"
          >
            {{ i18nStore.translate('buy') }}
          </myButton>
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-2xl text-xl font-bold mb-[13px]"
        >
          {{ formatSize(userInfo.fileWalletDTO?.downloadBalanceBytes || 0) }}
        </div>
      </div>

      <!-- 存储使用 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex items-center mb-[34px] justify-between">
          <div class="flex items-center">
            <SvgIcon name="storage" class="text-[#00e1ff] h-[30px] mr-[5px]" />
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
            >
              {{ i18nStore.translate('storage_usage') }}
            </div>
          </div>
          <myButton
            class="py-1 px-3 rounded-[5px] bg-[#00e1ff] text-white cursor-pointer"
            @click="showPayPopup({ type: '2' })"
          >
            {{ i18nStore.translate('kuorong') }}
          </myButton>
        </div>
        <div class="flex items-center">
          <div
            class="text-[#333] dark:text-[#bec6cf] sm:text-2xl text-xl font-bold mb-[13px] w-[150px]"
          >
            {{ formatSize(userInfo.fileWalletDTO.storageUsed) }}
          </div>
          <div class="text-[#333]">
            <div
              v-for="(item, index) in userInfo.bigFileExpireList"
              :key="index"
            >
              （{{ i18nStore.translate('套餐大小') }}：{{
                formatSize(item.size)
              }}&nbsp;&nbsp;&nbsp;{{ i18nStore.translate('过期时间') }}：{{
                timestampToTime(item.expireTime)
              }}）
            </div>
          </div>
        </div>

        <div class="mb-[11px]">
          <ProgressBar
            :value="
              (
                (userInfo.fileWalletDTO?.storageUsed /
                  userInfo.fileWalletDTO?.storageAmount) *
                100
              ).toFixed(2)
            "
          />
        </div>
        <div
          class="flex justify-between text-[#888] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
        >
          <div>
            {{
              i18nStore.translate('storage_used') +
              ' ' +
              formatSize(userInfo.fileWalletDTO?.storageUsed || 0)
            }}
          </div>
          <div>
            {{
              i18nStore.translate('total_storage') +
              ' ' +
              formatSize(userInfo.fileWalletDTO?.storageAmount || 0)
            }}
          </div>
        </div>
      </div>

      <!-- 修改昵称 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex justify-between mb-[5px]">
          <div
            class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          >
            {{ i18nStore.translate('account_setting') }}
          </div>
          <SvgIcon name="edit" class="text-[#00e1ff]" />
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          v-if="userInfo.nickname"
        >
          {{ i18nStore.translate('current_nickname') }}：{{ userInfo.nickname }}
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold mt-2"
        >
          {{ i18nStore.translate('nickname') + ':' }}
        </div>
        <div class="w-[100%] sm:flex sm:justify-between">
          <input
            type="text"
            v-model="nickname"
            class="sm:w-[370px] sm:mb-0 mb-[55px] w-[100%] px-5 py-2.5 font-bold rounded-lg border-0 focus:outline-theme-color text-lg bg-[#f4f5f6] dark:bg-[#191b1e] dark:text-[#bec6cf]"
          />
          <myButton
            class="sm:flex hidden w-[120px] h-[44px] bg-[#e5fcff] dark:bg-[#191b1e] text-base text-[#00E1FF] font-bold items-center justify-center rounded-lg cursor-pointer"
            @click="editNickname"
          >
            {{ i18nStore.translate('confirm') }}</myButton
          >
          <myButton
            class="sm:hidden w-[100%] h-[44px] bg-[#00E1FF] text-[18px] text-[#fff] flex items-center justify-center rounded-lg cursor-pointer"
            @click="editNickname"
          >
            {{ i18nStore.translate('confirm') }}</myButton
          >
        </div>
      </div>
      <!-- 绑定邮箱 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex justify-between mb-[5px]">
          <div
            class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          >
            {{ i18nStore.translate('bind_email')
            }}<span
              v-if="!userInfo.email"
              class="text-[#888] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
              >{{ '(' + i18nStore.translate('not_yet_bindng') + ')' }}</span
            >
          </div>
          <SvgIcon name="edit" class="text-[#00e1ff]" />
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          v-if="userInfo.email"
        >
          {{ i18nStore.translate('current_email') }}：{{ userInfo.email }}
        </div>
        <div class="w-[100%] sm:flex mt-2">
          <div class="sm:mr-6">
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold"
            >
              {{ i18nStore.translate('email') + ':' }}
            </div>
            <div class="relative sm:mb-0 mb-[55px]">
              <input
                type="email"
                v-model="email"
                :placeholder="i18nStore.translate('enter_your_email')"
                class="sm:w-[370px] w-[100%] px-5 py-2.5 font-bold rounded-lg border-0 focus:outline-theme-color text-lg bg-[#f4f5f6] dark:bg-[#191b1e] dark:text-[#bec6cf]"
              />
              <myButton
                class="absolute right-5 top-[50%] translate-y-[-50%] font-bold text-theme-color cursor-pointer"
                @click="getEamilCode"
              >
                {{ i18nStore.translate('get_code') }}
              </myButton>
            </div>
          </div>
          <div>
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold"
            >
              {{ i18nStore.translate('code') + ':' }}
            </div>
            <input
              type="text"
              v-model="emailCode"
              :placeholder="i18nStore.translate('enter_your_code')"
              class="sm:w-[370px] sm:mb-0 mb-[55px] w-[100%] px-5 py-2.5 font-bold rounded-lg border-0 focus:outline-theme-color text-lg bg-[#f4f5f6] dark:bg-[#191b1e] dark:text-[#bec6cf]"
            />
          </div>
        </div>
        <div class="sm:mt-[20px] sm:flex sm:justify-end">
          <myButton
            class="sm:flex hidden w-[120px] h-[44px] bg-[#e5fcff] dark:bg-[#191b1e] text-base text-[#00E1FF] font-bold items-center justify-center rounded-lg cursor-pointer"
            @click="bindEmail"
          >
            {{ i18nStore.translate('confirm') }}</myButton
          >
          <myButton
            class="sm:hidden w-[100%] h-[44px] bg-[#00E1FF] text-[18px] text-[#fff] flex items-center justify-center rounded-lg cursor-pointer"
            @click="bindEmail"
          >
            {{ i18nStore.translate('confirm') }}
          </myButton>
        </div>
      </div>
      <!-- 绑定手机号 -->
      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div class="w-[100%] flex justify-between mb-[5px]">
          <div
            class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          >
            {{ i18nStore.translate('bind_phone')
            }}<span
              v-if="!userInfo.mobile"
              class="text-[#888] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
              >{{ '(' + i18nStore.translate('not_yet_bindng') + ')' }}</span
            >
          </div>
          <SvgIcon name="edit" class="text-[#00e1ff]" />
        </div>
        <div
          class="text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
          v-if="userInfo.mobile"
        >
          {{ i18nStore.translate('current_phone') }}：{{
            userInfo.mobile.slice(0, 3) + '****' + userInfo.mobile.slice(7)
          }}
          <!-- phone.slice(0, 3) + '****' + phone.slice(7) -->
        </div>
        <div class="w-[100%] sm:flex mt-2">
          <div class="sm:mr-6">
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold"
            >
              {{ i18nStore.translate('phone') + ':' }}
            </div>
            <div class="relative sm:mb-0 mb-[55px]">
              <input
                type="email"
                v-model="phone"
                :placeholder="i18nStore.translate('enter_your_phone')"
                class="sm:w-[370px] w-[100%] px-5 py-2.5 font-bold rounded-lg border-0 focus:outline-theme-color text-lg bg-[#f4f5f6] dark:bg-[#191b1e] dark:text-[#bec6cf]"
              />
              <myButton
                class="absolute right-5 top-[50%] translate-y-[-50%] font-bold text-theme-color cursor-pointer"
                @click="getSmsCode"
              >
                {{ i18nStore.translate('get_code') }}
              </myButton>
            </div>
          </div>
          <div>
            <div
              class="text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold"
            >
              {{ i18nStore.translate('code') + ':' }}
            </div>
            <input
              type="text"
              v-model="smsCode"
              :placeholder="i18nStore.translate('enter_your_code')"
              class="sm:w-[370px] sm:mb-0 mb-[55px] w-[100%] px-5 py-2.5 font-bold rounded-lg border-0 focus:outline-theme-color text-lg bg-[#f4f5f6] dark:bg-[#191b1e] dark:text-[#bec6cf]"
            />
          </div>
        </div>
        <div class="sm:mt-[20px] sm:flex sm:justify-end">
          <myButton
            class="sm:flex hidden w-[120px] h-[44px] bg-[#e5fcff] dark:bg-[#191b1e] text-base text-[#00E1FF] font-bold items-center justify-center rounded-lg cursor-pointer"
            @click="bindphone"
          >
            {{ i18nStore.translate('confirm') }}
          </myButton>
          <myButton
            class="sm:hidden w-[100%] h-[44px] bg-[#00E1FF] text-[18px] text-[#fff] flex items-center justify-center rounded-lg cursor-pointer"
            @click="bindphone"
          >
            {{ i18nStore.translate('confirm') }}
          </myButton>
        </div>
      </div>

      <div
        class="flex flex-col w-[100%] max-w-[830px] p-6 bg-[#fff] dark:bg-[#171819] rounded-2xl mb-5"
      >
        <div
          class="mb-[16px] text-[#333] dark:text-[#bec6cf] sm:text-xl text-lg font-bold"
        >
          {{ i18nStore.translate('bind_wechat') }}
          <span
            v-if="userInfo.socialBind"
            class="text-[#26bc62] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
            >{{ '(' + i18nStore.translate('yet_bindng') + ')' }}</span
          >
          <span
            v-else
            class="text-[#888] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
            >{{ '(' + i18nStore.translate('not_yet_bindng') + ')' }}</span
          >
        </div>
        <div class="flex items-center mb-[16px]">
          <div
            class="mr-[22px] text-[#333] dark:text-[#bec6cf] sm:text-base text-base font-bold"
          >
            {{ i18nStore.translate('bind_wechat') + ':' }}
          </div>
          <img
            src="@/assets/login/wechatIcon.png"
            class="mr-[27px] w-[40px] h-[40px]"
          />
          <div class="flex items-center" v-if="!userInfo.socialBind">
            <div
              class="sm:flex hidden w-[120px] h-[44px] mr-[18px] bg-[#e5fcff] dark:bg-[#191b1e] text-base text-[#00E1FF] font-bold items-center justify-center rounded-lg cursor-pointer"
              @click="getWechatQrCode"
            >
              {{ i18nStore.translate('bind_immediately') }}
            </div>
            <div
              class="text-[#888] dark:text-[#bec6cf] sm:text-xs text-xs font-bold"
            >
              {{ i18nStore.translate('bind_wechat_to_login') }}
            </div>
          </div>
          <div
            class="sm:flex hidden w-[120px] h-[44px] mr-[18px] bg-[#e5fcff] dark:bg-[#191b1e] text-base text-[#00E1FF] font-bold items-center justify-center rounded-lg cursor-pointer"
            @click="visible = true"
            v-else
          >
            {{ i18nStore.translate('cancel_bind_immediately') }}
          </div>
        </div>
        <div
          class="sm:hidden w-[100%] h-[44px] bg-[#00E1FF] text-[18px] text-[#fff] flex items-center justify-center rounded-lg cursor-pointer"
          @click="getWechatQrCode"
        >
          {{ i18nStore.translate('bind_immediately') }}
        </div>
      </div>
    </div>
    <!-- toast -->
    <Toast position="center" group="formEditToast" />
  </div>
</template>
<script setup>
import ok from '@/assets/index/ok手势.png';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import FileUpload from 'primevue/fileupload';
import Toast from 'primevue/toast';
import ProgressBar from 'primevue/progressbar';
import { useToast } from 'primevue/usetoast';
import { useUserInfoStore, useI18nStore } from '@/stores/index.js';
import {
  editUserInfoApi,
  bindEmailApi,
  bindPhoneApi,
  bindWechatApi,
  avatarFileUploadApi,
  clearbindWechatApi
} from '@/apis/userInfo.js';
import {
  getSmsCodeApi,
  getEmailCodeApi,
  getWechatQrCodeApi
} from '@/apis/user.js';
const visible = ref(false);
const i18nStore = useI18nStore();
const router = useRouter();
const toast = useToast();
const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);
// 表单数据
const nickname = ref(userInfo.value.nickname);
const email = ref('');
const emailCode = ref('');
const phone = ref('');
const smsCode = ref('');

// 昵称修改
const editNickname = async () => {
  userInfo.value.nickname = nickname.value;
  const { sex, avatar } = userInfo.value;
  editUserInfoApi({ sex, avatar, nickname: nickname.value });
};
// 密码修改
const editPassword = async () => {
  router.push('/resetPassword');
};
// 绑定邮箱
const emailReg = (value) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
};
const getEamilCode = async () => {
  if (emailReg(email.value)) {
    userInfo.value.email;
    await getEmailCodeApi({ email: email.value, scene: 2 });
    toast.add({
      severity: 'success',
      summary: '发送成功',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  } else {
    toast.add({
      severity: 'error',
      summary: '请输入正确的邮箱格式',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  }
};
const bindEmail = async () => {
  if (emailReg(email.value)) {
    const formData = new FormData();
    formData.append('email', email.value);
    formData.append('code', emailCode.value);
    const res = await bindEmailApi(formData);
    if (res.status == 0) {
      toast.add({
        severity: 'success',
        summary: res.message,
        detail: '',
        group: 'formEditToast',
        life: 1500
      });
      userInfo.value.email = email.value;
    } else {
      toast.add({
        severity: 'error',
        summary: res.message,
        detail: '',
        group: 'formEditToast',
        life: 1500
      });
    }
  } else {
    toast.add({
      severity: 'error',
      summary: '请输入正确的邮箱格式',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  }
};

// 绑定手机号
const phoneReg = (value) => {
  return /^1[3-9]\d{9}$/.test(value);
};
const getSmsCode = async () => {
  if (phoneReg(phone.value)) {
    await getSmsCodeApi({ mobile: phone.value, scene: 2 });
    toast.add({
      severity: 'success',
      summary: '发送成功',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  } else {
    toast.add({
      severity: 'error',
      summary: '请输入正确的手机号',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  }
};
const bindphone = async () => {
  if (phoneReg(phone.value)) {
    const formData = new FormData();
    formData.append('phone', phone.value);
    formData.append('code', smsCode.value);
    const res = await bindPhoneApi(formData);
    if (res.status == 0) {
      toast.add({
        severity: 'success',
        summary: res.message,
        detail: '',
        group: 'formEditToast',
        life: 1500
      });
      userInfo.value.mobile = phone.value;
    } else {
      toast.add({
        severity: 'error',
        summary: res.message,
        detail: '',
        group: 'formEditToast',
        life: 1500
      });
    }
  } else {
    toast.add({
      severity: 'error',
      summary: '请输入正确的手机号',
      detail: '',
      group: 'formEditToast',
      life: 1500
    });
  }
};
// 微信绑定
const getWechatQrCode = async () => {
  const res = await getWechatQrCodeApi({
    redirectUri: 'https://okpan.com/userInfo',
    type: 32
  });
  window.location.href = res.data;
};
const cancelWechatQrCode = async () => {
  clearbindWechatApi({ type: 32, openid: userInfo.value.openid });
  visible.value = false;
  setTimeout(() => {
    window.location.reload();
  }, 1000);
};
// 处理路径参数
const handleParams = () => {
  const code = new URLSearchParams(location.search).get('code');
  const state = new URLSearchParams(location.search).get('state');
  if (code && state) {
    wechatBind(code, state);
  }
};
const wechatBind = async (code, state) => {
  bindWechatApi({ code, state, type: 32 });
};
onMounted(() => {
  handleParams();
});
// 头像上传
const avatarUpload = async (e) => {
  const formData = new FormData();
  formData.append('avatarFile', e.files[0]);
  const res = await avatarFileUploadApi(formData);
  userInfo.value.avatar = res.data;
  const { sex, nickname } = userInfo.value;
  editUserInfoApi({ sex, avatar: res.data, nickname });
};
// 时间戳转时间
const timestampToTime = (timestamp) => {
  const date = new Date(timestamp);
  const Y = date.getFullYear() + '-';
  const M =
    (date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1) + '-';
  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  const h =
    (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  const m =
    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
    ':';
  const s =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
};
</script>
<style lang="scss" scoped>
// 自定义组件样式
:deep(.p-fileupload-buttonbar) {
  background-color: transparent;
  padding: 0;
}
:deep(.p-fileupload-content) {
  padding: 0;
}
:deep(.p-progressbar-value) {
  background-color: #00e1ff;
}
</style>
